<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jq.js"></script>
    <style>
        .add, 
        .cart {
            display: inline-block;
            width: 100px;
            text-align: center;
            cursor: pointer;
            border: 1px solid #e3211a;
            border-radius: 4px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="content"></div>
    <span class="add">加入购物车</span>
    <span class="cart">
        <a href="cart.html">查看购物车</a>
    </span>
    <script src="./js/data.js"></script>
    <script>
        $(function() {
            
            // 当前商品的id
            var goodsId = '';
            // 商品名称
            var goodsName = '';
            // 获取url中的id，进而用来展示商品
            window.onload = function() {
                goodsId = location.search.substr(4);
                getGoods()
            }

            // 根据id查找商品
            function getGoods() {
                $.each(goodsList, function(i, item) {
                    // id相同 就是当前商品
                    if(goodsId == item.id) {
                        // 根据id显示页面内容
                        renderById(item)
                        goodsName = item.name;
                    }
                })
            }

            // 根据id显示页面内容
            function renderById(data) {
                console.log(data);
                var detailStr = '';
                detailStr = "<img width='200' src=http:"+data.image+">"+
                            "<h1 class=name>"+data.name+"</h1>"+
                            "<div class=tmprice>土猫价： <span>¥"+data.price+"</span></div>";
                $('.content').html(detailStr);
            }

            // 加入购物车，将数据存在本地
            $('.add').click(function() {
                // 保证类型是数组，可以是空数组但不能是null
                var cartList = JSON.parse(localStorage.getItem('cartList')) || [];
                cartList.push(goodsId);
                // 正常情况下，当id重复时应使数量加一，而不是重复记录id。这个市后台的工作
                localStorage.setItem('cartList', JSON.stringify(cartList));
                alert(goodsName+'添加成功!')
            })
        })
    </script>
</body>
</html>